<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body class="img_detail_body">

<div class="img_detail_header">
    <a href="#">
        <img src="images/img_close.png">
    </a>
    <span class="img_detail_title">
        2017款 野帝 280TSI DSG前行版
    </span>
    <div class="mui-clearfix"></div>
</div>

<div class="car_detail_img_ul">
    <ul>
        <li class="active">
            <a href="#">
                封面
            </a>
        </li>
        <li>
            <a href="#">
                外观
            </a>
        </li>
        <li>
            <a href="#">
                内饰
            </a>
        </li>
        <li>
            <a href="#">
                细节
            </a>
        </li>
    </ul>
</div>


<div class="img_detail_content">
    <div class="swiper-container" id="img_detail_swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="images/car1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/car1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/car1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/car1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/car1.jpg">
            </div>
        </div>
    </div>

    <div class="swiper-container" id="img_detail_swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide active">
                <img src="images/car1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/car1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/car1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/car1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/car1.jpg">
            </div>
        </div>
    </div>

</div>

<div class="img_detail_footer">
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination img_detail_pagination"></div>
    <div class="img_detail_footer_option">
        <img src="images/下载.png" class="detail_download">
        <img src="images/分享白.png" class="detail_share">
    </div>
</div>



</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery.2.1.1min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var mySwiper = new Swiper ('#img_detail_swiper', {
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationType: 'fraction'
        });
        var mySwiper2 = new Swiper ('#img_detail_swiper2', {
            centeredSlides: true,
            slidesPerView: 5,
            touchRatio: 0.2,
            slideToClickedSlide: true,
            spaceBetween: 10
        });
//        mySwiper.controller.control = mySwiper2;
//        mySwiper2.controller.control = mySwiper;
        mySwiper.params.control = mySwiper2;
        mySwiper2.params.control = mySwiper;
        $(".car_detail_img_ul li").click(function (e) {
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
            e.stopPropagation();
        });
        $("#img_detail_swiper2 .swiper-slide").click(function (e) {
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
            e.stopPropagation();
        });
        $(document).click(function () {
            $(".img_detail_header").toggleClass("unvisible");
            $(".car_detail_img_ul").toggleClass("unvisible");
            $("#img_detail_swiper2").toggleClass("unvisible");
            $(".img_detail_footer").toggleClass("unvisible");
        })
    })
</script>

</html>